<template>
	<view class="phb">
		<view class="phb__top">
			<view class="phb__top__item1" @click="navto('/pages/home/shudetail')">
				<view class="phb__top__item1__picbox">
					<image src="/static/pic.png" class="phb__top__item1__pic" mode="aspectFill"></image>
					<view class="topbox">
						<image src="/static/phb/top2.png" class="topbox__icon" mode=""></image>
						<view class="topbox__text">
							TOP
						</view>
						<view class="topbox__num">
							2
						</view>
					</view>
				</view>
				<view class="phb__top__item1__ts left">

				</view>
				<view class="phb__top__item1__tx">
					<view class="phb__top__name" style="color: #187EFE;">
						九焰至尊
					</view>
					<view class="phb__top__zz">
						爱吃白菜
					</view>
				</view>
			</view>
			<view class="phb__top__item2" @click="navto('/pages/home/shudetail')">
				<view class="phb__top__item2__picbox">
					<image src="/static/pic.png" class="phb__top__item2__pic" mode="aspectFill"></image>
					<view class="topbox">
						<image src="/static/phb/top1.png" class="topbox__icon" mode=""></image>
						<view class="topbox__text">
							TOP
						</view>
						<view class="topbox__num">
							1
						</view>
					</view>
				</view>
				<view class="phb__top__item2__ts">

				</view>
				<view class="phb__top__item2__tx">
					<view class="phb__top__name" style="margin-top: 32rpx;color: #F9A503;">
						九焰至尊
					</view>
					<view class="phb__top__zz">
						爱吃白菜
					</view>
				</view>
			</view>
			<view class="phb__top__item1" @click="navto('/pages/home/shudetail')">
				<view class="phb__top__item1__picbox">
					<image src="/static/pic.png" class="phb__top__item1__pic" mode="aspectFill"></image>
					<view class="topbox">
						<image src="/static/phb/top3.png" class="topbox__icon" mode=""></image>
						<view class="topbox__text">
							TOP
						</view>
						<view class="topbox__num">
							3
						</view>
					</view>
				</view>
				<view class="phb__top__item1__ts right">

				</view>
				<view class="phb__top__item1__tx">
					<view class="phb__top__name" style="color: #76B920;">
						九焰至尊
					</view>
					<view class="phb__top__zz">
						爱吃白菜
					</view>
				</view>
			</view>
		</view>
		<view class="phb__list">
			<view class="phb__list__item" v-for="(item,index) in list" :key="index" @click="navto('/pages/home/shudetail')">
				<view class="phb__list__item__picbox">
					<view class="topbox" v-if="index+4<11">
						<image src="/static/phb/top.png" class="topbox__icon" mode=""></image>
						<view class="topbox__text">
							TOP
						</view>
						<view class="topbox__num">
							{{index+4}}
						</view>
					</view>
					<image src="/static/pic.png" class="phb__list__item__pic" mode="aspectFill"></image>
				</view>
				<view class="phb__list__item__right">
					<view class="">
						<view class="phb__list__item__name">
							浴火重生:绯色无疆
						</view>
						<view class="phb__list__item__jj">
							浴火重生，纵横官场，美女老师，芳邻，校花，多情女老总….尽在掌控之中。
						</view>
					</view>
					<view class="u-flex u-flex-y-center u-flex-between phb__list__item__zz">
						<view class="">
							会飞的鱼
						</view>
						<view class="">
							都市言情·完本
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "phb",
		props: {
			list: {
				type: Array,
				default () {
					return [];
				}
			},
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.phb {
		
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		padding-top: 24rpx;
		&__top {
			display: flex;
			align-items: flex-end;
			justify-content: center;
			background: linear-gradient(180deg, #f3f5f7 0%, #FFFFFF 100%);
			&__item1 {
				display: flex;
				flex-direction: column;
				align-items: center;

				&__picbox {
					width: 144rpx;
					height: 192rpx;
					position: relative;
				}

				&__pic {
					width: 144rpx;
					height: 192rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					z-index: 2;
				}

				&__ts {
					width: 225rpx;
					height: 33rpx;
					// background: linear-gradient(180deg, #F7FDFF 0%, #DFEFF3 100%);
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					margin-top: -12rpx;
					position: relative;

					&:before {
						content: "";
						position: absolute;
						top: -18rpx;
						left: 0;
						right: 0;
						bottom: 0;
						z-index: 1;
						background: linear-gradient(180deg, #F7FDFF 0%, #DFEFF3 100%);

						transform: perspective(100px) rotateX(35deg);
					}
				}

				&__tx {
					width: 225rpx;
					height: 178rpx;
					background: linear-gradient(180deg, #D9F6FF 0%, #FFFFFF 100%);
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					position: relative;
				}
			}

			&__item2 {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin: 0 -30rpx;

				&__picbox {
					width: 164rpx;
					height: 218rpx;
					position: relative;
				}

				&__pic {
					width: 164rpx;
					height: 218rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					z-index: 2;
				}

				&__ts {
					width: 288rpx;
					height: 43rpx;
					margin-top: -22rpx;
					position: relative;

					&:before {
						content: "";
						position: absolute;
						top: -22rpx;
						left: 0;
						right: 0;
						bottom: 0;
						z-index: 1;
						background: linear-gradient(180deg, #F7FDFF 0%, #DFEFF3 100%);
						transform-origin: bottom;
						transform: perspective(100px) rotateX(35deg);
					}
				}

				&__tx {
					width: 288rpx;
					height: 227rpx;
					background: linear-gradient(180deg, #D9F6FF 0%, #FFFFFF 100%);
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					position: relative;
					z-index: 3;
				}
			}

			&__name {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #187EFE;
				line-height: 40rpx;
				margin-top: 22rpx;
				text-align: center;
			}

			&__zz {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				line-height: 34rpx;
				text-align: center;
			}
		}

		&__list {
			padding: 24rpx;
			background-color: #fff;
			&__item {
				display: flex;
				align-items: center;
				margin-bottom: 32rpx;
				&__picbox{
					width: 152rpx;
					height: 200rpx;
					position: relative;
					margin-right: 16rpx;
				}
				&__pic {
					width: 152rpx;
					height: 200rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					
				}

				&__right {
					height: 200rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

				}

				&__name {
					width: 487rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #000000;
					line-height: 44rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-bottom: 8rpx;
				}

				&__jj {
					width: 487rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #666666;
					line-height: 36rpx;
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					/* 这里是超出几行省略 */
					overflow: hidden;
				}

				&__zz {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					line-height: 34rpx;
				}
			}

			:last-child {
				margin-bottom: 0;
			}
		}
	}

	.topbox {
		position: absolute;
		width: 48rpx;
		height: 58rpx;
		top: 0;
		right: 8rpx;
		z-index: 4;
		text-align: center;

		&__icon {
			width: 48rpx;
			height: 58rpx;
			position: absolute;
			top: 0;
			left: 0;

		}

		&__text {
			position: relative;
			font-family: DIN, DIN;
			font-weight: bold;
			font-size: 16rpx;
			color: #FFFFFF;
			line-height: 20rpx;
		}

		&__num {
			position: relative;
			font-family: DIN, DIN;
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 34rpx;
			margin-top: -6rpx;
		}

	}

	.left {
		&:before {
			transform-origin: bottom right;
		}

	}

	.right {
		&:before {
			transform-origin: bottom left;
		}

	}
</style>